<template>
  <div class="index-main">
    <!-- top区域 -->
    <div class="top-container">
      <el-menu
        class="el-menu-horizontal-demo"
        mode="horizontal"
        background-color="#262626"
        text-color="#AEAEAE"
      >
        <el-menu-item index="1" class="icon">
          <a href="#/admin/myinfo/message">
            <i class="el-icon-chat-square"></i>
          </a>
        </el-menu-item>
        <el-menu-item index="2" class="icon">
          <a href="#/admin/myinfo/myindex">
            <i class="el-icon-user"></i>
          </a>
        </el-menu-item>
        <el-menu-item index="3" class="icon">
          <a href="#/admin/myinfo/collection">
            <img
              src="../../assets/images/heart_icon.png"
              alt="红心图标"
              class="icon_size"
            />
          </a>
        </el-menu-item>
        <el-menu-item index="4" class="icon">
          <a href="#/admin/myinfo/uploadshow">
            <i class="el-icon-upload"></i>
          </a>
        </el-menu-item>
      </el-menu>
    </div>
    <!-- 搜索区域 -->
    <div class="select_search">
      <div class="div_1">
        <el-select placeholder="选择类别" v-model="formLabelAlign_search.typeid">
          <el-option label="环境-3D" value="1"></el-option>
          <el-option label="艺术品-3D" value="2"></el-option>
          <el-option label="植物-3D" value="3"></el-option>
          <el-option label="物品-3D" value="4"></el-option>
          <el-option label="粒子动画" value="5"></el-option>
          <el-option label="艺术品-2D" value="6"></el-option>
          <el-option label="视频" value="7"></el-option>
          <el-option label="材料" value="8"></el-option>
          <el-option label="音乐" value="9"></el-option>
        </el-select>
      </div>
      <div class="div_2">
        <el-input
          type="text"
          id="search"
          v-model="formLabelAlign_search.goodname"
        ></el-input>
      </div>
      <div class="div_3">
        <el-button
          class="searchbutton"
          style="color: white"
          @click="getMygoodsDataQuery()"
        ><i class="el-icon-search"></i>
        </el-button>
      </div>
    </div>
    <!-- 主体部分 -->
    <div class="index-buttom">
      <div class="classes" v-for="type in types" :key="type.typeid">
        <div class="text">
          <span class="chinese">{{type.typename}}</span>
          <span class="english">{{formatStatus(type.typename)}}</span>
          <a @click="gotoquery(type)"
            ><i class="el-icon-arrow-right"></i
          ></a>
        </div>
        <div class="div_">
          <div
            class="div_n"
            v-for="good in type.goods"
            :key="good.goodid"
            @click="getMygoodsDetail(good)"
          >
            <img
              :src="good.coverurl"
              alt="轮播图片"
              class="img_size"
            />
            <el-button class="floatbutton" v-if="good.goodstatus == 1">上架</el-button>
            <el-button class="floatbutton" v-if="good.goodstatus == 2">未通过</el-button>
            <el-button class="floatbutton" v-if="good.goodstatus == 3">待审核</el-button>
            <el-button class="floatbutton" v-if="good.goodstatus == 4">已购买</el-button>
            <el-button class="floatbutton" v-if="good.goodstatus == 5">已转卖</el-button>
            <el-button class="floatbutton" v-if="good.goodstatus == 6">下架</el-button>
            <span class="floattext">{{good.goodname}}</span>
          </div>
        </div>
        <!-- <ul class="class_ul">
          <li class="line" @click="dialogVisible = true">
            <a href="_blank" class="imgclass">
              <img class="img2" src="~images/1.jpg" alt="" />
            </a>
          </li>
          <li class="line">
            <a href="_blank" class="imgclass">
              <img class="img2" src="~images/1.jpg" alt="" />
            </a>
          </li>
          <li class="line">
            <a href="_blank" class="imgclass">
              <img class="img2" src="~images/1.jpg" alt="" />
            </a>
          </li>

          <li class="line">
            <a href="_blank" class="imgclass">
              <img class="img2" src="~images/1.jpg" alt="" />
            </a>
          </li>
        </ul> -->
      </div>
      <!-- 商品详情 -->
      <el-dialog
        :visible.sync="dialogVisible"
        width="45%"
        :before-close="handleClose"
        show-close="false"
        close-on-press-escape
        :model="tableDetail"
        class="goodsDetails"
      >
        <div class="detailsContainer">
          <div class="row_1">
            <div class="column_1">
              <el-carousel>
                <el-carousel-item v-for="imgUrl in imgUrls" :key="imgUrl">
                  <img :src="imgUrl" alt="封面图片" class="imgsize"/>
                </el-carousel-item>
              </el-carousel>
            </div>
            <div class="column_2">
              <span class="goodnameSpan">{{ tableDetail.goodname }}</span>
              <el-link
                :href="tableDetail.documenturl"
                target="_blank"
              >
                <i class="el-icon-download downloadLink"></i>
              </el-link>
              <div class="row_1 card_limit">
                <el-card shadow="never">
                  <span class="font_style1">
                    Token ID : {{ tableDetail.tokenid }}
                  </span>
                </el-card>
                <span 
                  class="el-icon-document-copy copyLink"
                  v-clipboard:copy="tableDetail.tokenid"
                  v-clipboard:success="onCopy"
                  v-clipboard:error="onError"
                ></span>
              </div>
              <p class="font_style2">
                作者 ：{{ tableDetail.user }}
              </p>
              <p class="font_style2">
                分类 ：{{ tableDetail.type }}
              </p>
              <div class="row_1">
                <span class="font_style3">价格：￥{{ tableDetail.price }}</span>
                <div class="button_select">
                  <el-button class="sold" @click="gotoSold " v-if="goods.goodstatus == 1">编辑</el-button>
                  <el-button class="sold" @click="gotoSold" v-if="goods.goodstatus == 2">编辑</el-button>
                  <el-button class="sold" @click="gotoSold" v-if="goods.goodstatus == 3">编辑</el-button>
                  <el-button class="sold_1" @click="gotoSold" v-if="goods.goodstatus == 2">删除</el-button>
                  <el-button class="sold" @click="gotoSold" v-if="goods.goodstatus == 4">转卖</el-button>
                  <el-button class="sold" @click="gotoSold" v-if="goods.goodstatus == 6">上架</el-button>
                </div>
              </div>
              <div>
                <el-button class="buybutton" @click="gotoBuy">
                  <el-link
                    :href="tableDetail.mesh"
                    target="_blank"
                    class="xiazai"
                  ><p class="font_style3_xiazai">  mesh</p>
                  </el-link>
                  <el-link
                    :href="tableDetail.albedo"
                    target="_blank"
                    class="xiazai"
                  ><p class="font_style3_xiazai">  albedo</p>
                  </el-link>
                  <el-link
                    :href="tableDetail.normal"
                    target="_blank"
                    class="xiazai"
                  ><p class="font_style3_xiazai">  normal</p>
                  </el-link>
                  <el-link
                    :href="tableDetail.mask"
                    target="_blank"
                    class="xiazai"
                  ><p class="font_style3_xiazai">  mask</p>
                  </el-link>
                  <el-link
                    :href="tableDetail.emissive"
                    target="_blank"
                    class="xiazai"
                  ><p class="font_style3_xiazai">  emissive</p>
                  </el-link>
                </el-button>
              </div>
            </div>
          </div>
          <div class="row_2">
            <span class="font_style3">商品简介：</span>
            <el-card shadow="always" class="details-card">
              <p class="font_style2">
                {{ tableDetail.introduction }}
              </p>
            </el-card>
          </div>
          <div class="row_2">
            <span class="font_style3">历史交易记录：</span>
            <el-card shadow="always" class="details-card">
              <div class="records">
                <div>
                  <p class="font_style3">日期</p>
                  <p class="font_style2">{{ tableDetail.transaction.date }}</p>
                </div>
                <div>
                  <p class="font_style3">价格</p>
                  <p class="font_style2">{{ tableDetail.transaction.price }}</p>
                </div>
                <div>
                  <p class="font_style3">拥有者</p>
                  <p class="font_style2">{{ tableDetail.transaction.owner }}</p>
                </div>
              </div>
            </el-card>
          </div>
        </div>
      </el-dialog>
      <!-- 编辑信息 -->
      <el-dialog
        :visible.sync="dialogVisible1"
        title="编辑信息"
        class="changeinfo"
        :before-close="handleClose"
        show-close="false"
        close-on-press-escape
        :model="tableDetail"
      >
      <!-- 利用el-dialog包含内容设计header的相关内容-->
      <!-- 编辑信息body具体内容开始-->
        <!-- 上传表单区域 -->
        <el-form
          :model="tableDetail"
          id="changeForm"
          label-width="80px"
        >
          <!-- 上传封面图、上传预览图 -->
          <div class="upload_image">
            <el-form-item prop="imgUrl" label-width="0px">
              <!-- 上传封面图 -->              
              <div id="div1">
                <span class="text_style">封面图</span>             
                <el-upload
                  class="avatar-uploader"
                  action="https://jsonplaceholder.typicode.com/posts/"
                  accept="image/png,image/gif,image/jpg,image/jpeg"
                  :limit="2"
                  :before-upload="beforeAvatarUpload"
                  :show-file-list="false"
                  list-type="picture"
                  :file-list="fileList1"
                  :http-request="toUploadfile1"
                  v-if="tableDetail.coverurl == ''"
                >
                  <i class="el-icon-picture avatar-uploader-icon"></i>
                  <el-button class="coverbutton">封面</el-button>
                </el-upload>
              </div>
            </el-form-item>
            <img
              v-if="tableDetail.coverurl"
              referrerpolicy="no-referrer"
              :src="tableDetail.coverurl"
              alt="加载图片失败"
              class="avatar-uploader-icon1"
            />
            <el-form-item label-width="0px">
              <!-- 上传预览图 -->
              <div id="div2">
                <span class="text_style">预览图</span>
                <el-upload
                  ref="pictureUpload"
                  action="https://imct.oss-cn-beijing.aliyuncs.com"
                  list-type="picture-card"
                  :file-list="fileList2"
                  :http-request="toUploadfile2"
                  class="avatar-uploader_1"
                  :auto-upload="false"
                >
                  <i
                    slot="default"
                    class="el-icon-picture avatar-uploader-icon_1"
                  ></i>
                  <div slot="file" slot-scope="{ file }">
                    <img class="avatar-uploader-icon_1" :src="file.url" alt="" />
                    <span class="el-upload-list__item-actions">
                      <span
                        class="el-upload-list__item-preview"
                        @click="handlePictureCardPreview(file)"
                      >
                        <i class="el-icon-zoom-in"></i>
                      </span>
                      <span
                        v-if="!disabled"
                        class="el-upload-list__item-delete"
                        @click="handleRemove(file)"
                      >
                        <i class="el-icon-delete"></i>
                      </span>
                    </span>
                  </div>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible_img">
                  <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>                
              </div>
            </el-form-item>
          </div>
          <!-- 编辑信息 -->
          <div class="upload_changeinfo">
            <el-form-item label="价格">
              <el-input v-model="tableDetail.price"></el-input>
            </el-form-item>
            <el-form-item label="名称">
              <el-input v-model="tableDetail.goodname"></el-input>
            </el-form-item>
            <el-form-item label="分类">
              <el-select placeholder="选择类别" v-model="tableDetail.type">
                <el-option label="环境-3D" value="环境-3D"></el-option>
                <el-option label="艺术品-3D" value="艺术品-3D"></el-option>
                <el-option label="植物-3D" value="植物-3D"></el-option>
                <el-option label="物品-3D" value="物品-3D"></el-option>
                <el-option label="粒子动画-3D" value="粒子动画-3D"></el-option>
                <el-option label="艺术品-2D" value="艺术品-2D"></el-option>
                <el-option label="视频" value="视频"></el-option>
                <el-option label="材料" value="材料"></el-option>
                <el-option label="音乐" value="音乐"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="简介">
              <el-card shadow="always" class="box-card">
                <el-input v-model="tableDetail.introduction"></el-input>
              </el-card>
            </el-form-item>
          </div>
          <!-- 点击按钮 -->
          <div class="commit_changeinfo">
              <el-button class="commitbutton" @click="doModifyGoods()"> 提交 </el-button>
          </div>
        </el-form>
      <!-- 编辑信息具体内容结束-->
      </el-dialog>
      <br />
      <!-- <div class="classes">
        <div class="text">
          <span class="chinese">艺术品-3D</span>
          <span class="english">Artwork-3D</span>
          <a href="#/admin/goods/goodsindex"
            ><i class="el-icon-arrow-right"></i
          ></a>
        </div>
        <div class="div_">
          <div class="div_n" v-for="n in 4" :key="n">
            <img src="../../common/picture/ZT.png" />
            <span class="floattext">名称</span>
          </div>
        </div>
        <ul class="class_ul">
          <li class="line">
            <a href="_blank" class="imgclass">
              <img class="img2" src="~images/1.jpg" alt="" />
            </a>
          </li>
          <li class="line">
            <a href="_blank" class="imgclass">
              <img class="img2" src="~images/1.jpg" alt="" />
            </a>
          </li>
          <li class="line">
            <a href="_blank" class="imgclass">
              <img class="img2" src="~images/1.jpg" alt="" />
            </a>
          </li>
          <li class="line">
            <a href="_blank" class="imgclass">
              <img class="img2" src="~images/1.jpg" alt="" />
            </a>
          </li>
        </ul>
      </div> -->
    </div>
  </div>
</template>

<script>
import { getMyData, doModify, getGoodDetail} from "crm/myinfo/myinfo.js";
import { EventBus } from "bus/mybus.js";
import { uploadToAli } from "@/utils/alioss.js";
import { doUpload } from "../../crm/myinfo/myinfo";
export default {
  data() {
    return {
      imageUrl: "",
      fileList1: [],
      fileList2: [],
      fileList3: [],    
      dialogVisible: false,
      dialogVisible1: false,
      dialogVisible_img: false,
      dialogImageUrl:"",
      formLabelAlign_search: {
        typeid: undefined,
        goodname: "",
      },
      //所有商品数据
      tableData: [],
      types: [],
      types_1: [],
      typenames: [],
      typeids: [],
      total_pics: 0,
      imgUrls: [],
      goods: {
        goodid: 1,
        coverurl: "",
        covername: "",
        goodstatus: 1,
        goodname: "",
        price: 0.0,
      },
      //商品详情
      tableDetail:
        {
          goodid: "",
          goodurlname: "",
          price: 0,
          type: "",
          goodname: "",
          coverurl: "",
          covername: "",
          user: "",
          userid: "1",
          pics: {
            picurl: "",
            picname: "",
          },
          documenturl: "",
          documentname: "",
          transaction:{
            date: "",
            price: 12.6,
            owner: "",
            },
          introduction: "",
          tokenid: 0,
        },
    };
  },
  // created() {
  //   this.getMygoodsData();
  // },
  created(){
    this.getMygoodsData();
  },
  methods: {
    downLoad() {
      window.location.href = this.tableDetail.documenturl;
    },
    //获取页面初始化数据
    getMygoodsData() {
      let payload = {};
      payload.userid = localStorage.getItem("userid");
      getMyData(payload)
        .then((res) => {
          if (res.status == "OK") {
            this.types = res.data.types;
            // console.log(this.types);
            // this.total = this.tableData.types.length;
            // for (let i = 0; i < this.total; i++) {
            //   this.types[i]  = this.tableData.types[i];
            //   this.typenames[i] = this.tableData.types[i].typename;
            //   this.typeids[i] = this.tableData.types[i].typeid;
            //   this.goods[i] = this.tableData.types[i].goods;
            // }
            // console.log(this.types);
            // console.log(this.typename);
            // console.log(this.typeid);
            // console.log(this.goods);
            // console.log(this.tableData.types[0]);
          } else {
            alert("数据加载失败");
          }
        })
        .catch((err) => {
          EventBus.$emit("closeloading");
        });
       
    },
    //获取商品查询结果（我的商品）
    getMygoodsDataQuery() {
      let payload = {};
      payload.userid = localStorage.getItem("userid");
      payload.typeid = this.formLabelAlign_search.typeid;
      payload.goodname = this.formLabelAlign_search.goodname;
      getMyData(payload)
        .then((res) => {
          if (res.status == "OK") {
            this.types = res.data.types;
            // this.total = this.tableData.types.length;
            // for (let i = 0; i < this.total; i++) {
            //   this.typename[i] = this.tableData.types[i].typename;
            //   this.typeid[i] = this.tableData.types[i].typeid;
            //   this.goods[i] = this.tableData.types[i].goods;
            // }
            // console.log(this.typename);
            // console.log(this.typeid);
            // console.log(this.goods);
            // console.log(this.tableData.types[0]);
          } else {
            alert("数据加载失败");
          }
        })
        .catch((err) => {
          EventBus.$emit("closeloading");
        });
    },
    //类型对应
    formatStatus(row) {
      switch (row) {
        case "环境-3D":
          return "Environment-3D";
        case "艺术品-3D":
          return "Artwork-3D";
        case "植物-3D":
          return "Plants-3D";
        case "物品-3D":
          return "Artical-3D";
        case "粒子动画":
          return "Particle";
        case "艺术品-2D":
          return "Artwork-2D";
        case "视频":
          return "Video";
        case "材料":
          return "Meterial";
        case "音乐":
          return "Music";    
      }
    },    
    //获取商品详情数据
    getMygoodsDetail(good) {
      this.dialogVisible = true;
      // console.log(good);
      // console.log(good.goodid);
      let payload = {};
      payload.userid = localStorage.getItem("userid");
      payload.goodid = good.goodid;
      this.goods.goodstatus = good.goodstatus;
      getGoodDetail(payload)
        .then((res) => {
          if (res.status == "OK") {
            this.tableDetail = res.data;
            this.total_pics = res.data.pics.length;
            this.imgUrls = [];
            this.imgUrls.push(this.tableDetail.coverurl);
            for (let i = 0; i < this.total_pics; i++) {
              this.imgUrls.push(this.tableDetail.pics[i].picurl);
            }
            // this.formLabelAlign.price = res.data.price;
            // this.formLabelAlign.goodname = res.data.goodname;
            // this.formLabelAlign.type = res.data.type;
            // this.formLabelAlign.introduction = res.data.introduction;
          } else {
            alert("数据加载失败");
          }
        })
        .catch((err) => {
          EventBus.$emit("closeloading");
        });
    },
    //编辑信息
    doModifyGoods() {
      let payload = {};
      payload.goodid = this.tableDetail.goodid;
      // console.log(payload.goodid);
      // console.log(typeof(payload.goodid));
      payload.price = this.tableDetail.price;
      payload.type = this.tableDetail.type;
      payload.goodname = this.tableDetail.goodname;
      payload.coverurl = this.tableDetail.coverurl;
      payload.covername = this.tableDetail.covername;
      payload.pics = this.tableDetail.pics;
      payload.documenturl = this.tableDetail.documenturl;
      payload.documentname = this.tableDetail.documentname;
      payload.introduction = this.tableDetail.introduction;
      payload.userid = Number(localStorage.getItem("userid"));
      doModify(payload)
        .then((res) => {
          if (res.data.status !== "OK") {
            alert("编辑信息失败");
            return;
          } else if (res.data.status == "OK") {
            alert("编辑信息成功！");
            this.dialogVisible1 = false;
          }
        })
        .catch((err) => {});
    },
    //页面跳转（类别查询）
    gotoquery(type) {
      this.$router.push({
        name: "/admin/goods/classes",
        params: {
          typeid: type.typeid,
          typename: type.name,
        },
      });
    },
    //选择分类
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.cities.length;
    },
    //缩略图操作
    // handleRemove(file) {
    //   //console.log(file);
    //   file.url == "";
    // },
    //缩略图删除
    handleRemove(file) {
      const uploadFiles = this.$refs.pictureUpload.uploadFiles;
      console.log(uploadFiles);
      for (let i = 0; i < uploadFiles.length; i++) {
        if (uploadFiles[i]["picurl"] === file.picurl) {
          uploadFiles.splice(i, 1);
          this.fileList2.splice(i, 1);
        }
      }
    },
    //缩略图放大
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible_img = true;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    async toUploadfile1(file) {
      var storeAs = "file/" + new Date().getTime() + "&" + file.file.name;
      // this.name = file.file.name
      var uploadUrl = "https://imct.oss-cn-beijing.aliyuncs.com/" + storeAs;
      // this.uploadUrl = uploadUrl
      await uploadToAli(storeAs, file.file);
      const fileObj = {
        name: file.file.name,
        url: uploadUrl,
      };

      this.fileList1.push(fileObj);
      this.formLabelAlign.coverurl = this.fileList1[0].url;
      this.formLabelAlign.covername = this.fileList1[0].name;
      this.imageUrl = this.formLabelAlign.coverurl;
      // console.log(this.formLabelAlign.coverurl);
    },
    //上传缩略图
    async toUploadfile2(file) {
      var storeAs = "file/" + new Date().getTime() + "&" + file.file.name;
      // this.name = file.file.name
      var uploadUrl = "https://imct.oss-cn-beijing.aliyuncs.com/" + storeAs;
      // this.uploadUrl = uploadUrl
      await uploadToAli(storeAs, file.file);
      const fileObj = {
        picname: file.file.name,
        picurl: uploadUrl,
      };

      this.fileList2.push(fileObj);
      console.log(fileObj);
      console.log(this.fileList2);
    },

    async toUploadfile3(file) {
      var storeAs = "file/" + new Date().getTime() + "&" + file.file.name;
      // this.name = file.file.name
      var uploadUrl = "https://imct.oss-cn-beijing.aliyuncs.com/" + storeAs;
      // this.uploadUrl = uploadUrl
      await uploadToAli(storeAs, file.file);
      const fileObj = {
        name: file.file.name,
        url: uploadUrl,
      };

      this.fileList3.push(fileObj);
      this.formLabelAlign.documenturl = this.fileList3[0].url;
      this.formLabelAlign.documentname = this.fileList3[0].name;
    },
    //删除上传的商品
    // onRemove3(file, fileList3) {
    //   this.fileList3 = [];
    //   this.formLabelAlign.documenturl = "";
    //   this.formLabelAlign.documentname = "";
    // },
    //删除前询问
    beforeRemove(file) {
      let a = true;
      if (file && file.status === "success") {
        //放在文件上传成功的判断条件里，是为了防止未上传文件就执行删除操作
        a = this.$confirm(`确定移除 ${file.name}？`);
      }
      return a;
    },
    onRemove3(file, fileList4) {
      this.fileList3 = [];
      this.formLabelAlign.documenturl = "";
      this.formLabelAlign.documentname = "";
    },
    // handleAvatarSuccess(res, file) {
    //   this.imageUrl = URL.createObjectURL(file.raw);
    //   console.log(file.raw);
    // },
    async onUpload() {
      if (
        this.formLabelAlign.goodname !== "" &&
        this.formLabelAlign.price !== "" &&
        this.formLabelAlign.type !== "" &&
        this.formLabelAlign.typeid !== "" &&
        this.formLabelAlign.introduction !== "" &&
        this.formLabelAlign.coverurl !== "" &&
        this.formLabelAlign.covername !== "" &&
        this.formLabelAlign.pics !== [] &&
        this.formLabelAlign.documenturl !== "" &&
        this.formLabelAlign.documentname !== ""
      ) {
      } else {
        this.$message.info("请检查是否上传完整!");
      }
      let payload = { ...this.formLabelAlign };
      var fileList2Filter = this.fileList2.filter(
        (item) => delete item.status && delete item.uid
      );
      payload.pics = fileList2Filter;
      payload.userid = localStorage.getItem("userid");
      doUpload(payload)
        .then((res) => {
          if (res.data.status == "OK") {
            this.$message.success("提交成功");
            this.$router.push("/admin/myinfo/myindex");
          } else {
            this.$message.error("提交失败");
            location.reload();
          }
        })
        .catch((err) => {
          EventBus.$emit("closeloading");
        });
    },
    //点击转卖之后跳出弹出框
    gotoSold(good) {
      this.dialogVisible = false;
      this.dialogVisible1 = true;
    },
    // 用户通过点击关闭图标或遮罩关闭 Dialog 时起效的回调函数
    // handleClose(done) {
    //   this.$confirm("确认关闭？")
    //     .then((_) => {
    //       done();
    //     })
    //     .catch((_) => {});
    // },
    // 复制成功时的回调函数
    onCopy (e) {
    this.$message.success("内容已复制到剪切板！")
    },
    // 复制失败时的回调函数
    onError (e) {
    this.$message.error("抱歉，复制失败！")
    },
  },
};
</script>
<style scoped>
.index-main {
  display: flex;
  width: 100%;
  height: 100%;
  padding: 0%;
  flex-direction: column;
}
.top-container {
  width: 100%;
  height: 56px;
  margin: 0%;
  padding: 0%;
  background-color: #262626;
  display: flex;
  flex-direction: row;
}
.el-menu {
  height: 55px;
  width: 300px;
  border-bottom: solid 1px #262626;
  position: relative;
  left: 40%;
}
.icon {
  width: 64px;
  height: 56px;
}
.icon_size {
  width: 30px;
  height: 25px;
}
.download_icon {
  width: 64px;
  height: 56px;
}
.icon i {
  font-size: 28px;
}
.download_icon {
  margin-left: 20px;
  font-size: 28px;
}
.select_search {
  width: 100%;
  height: 40px;
  margin-top: 10px;
  margin-bottom: 0px;
  padding: 0%;
  display: flex;
  flex-direction: row;
}
.div_1 {
  position: relative;
  left: 60%;
}
.div_2 {
  position: relative;
  left: 60%;
}
.div_3 {
  position: relative;
  left: 60%;
}
.searchbutton {
  background: #2F2F2F;
  border: 1px solid #2F2F2F;
}
.search {
  margin: 0% 3%;
  width: 56px;
}
.select_search /deep/.el-input__inner {
  background-color: #2f2f2f;
  border: 5px solid #292929;
  border-radius: 20px;
  font-family: "Youshebiaotihei";
  color: #787878;
  font-size: 20px;
  width: 250px;
}
.text_note {
  font-family: "Youshebiaotihei";
}
.div_ {
  width: 95%;
  overflow: hidden;
  padding: 15px 0px;
  display: flex;
  flex-wrap: wrap;
  margin-left: 70px;
}
.div_n {
  position: relative;
  width: calc(25% - 30px);
  height: 250px;
  float: left;
  margin-right: 30px;
  margin-bottom: 20px;
}
/* 图片大小 */
.img_size {
  /* width: 300px;
  height: 250px; */
  width: 100%;
  height: 100%;
}
/* 悬浮按钮 */
.floatbutton {
  position: absolute;
  top: 10px;
  left: 5px;
  color: #fdfdfd;
  background-color: #8E8E8E;
  font-family: "Youshebiaotihei";
  font-size: 28px;
  border: #8E8E8E;
}
/* 悬浮的文字 */
.floattext {
  position: absolute;
  bottom: 8px;
  right: 16px;
  color: #fdfdfd;
  font-family: "Youshebiaotihei";
  font-size: 28px;
}
/* .el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
} */
.el-carousel__container {
  width: 250px;
  height: 250px;
}
.index-buttom {
  width: 100%;
  height: 100%;
  margin: auto;
}
.classes {
  display: flex;
  flex-direction: column;
}
.class_ul {
  margin-top: 30px;
  margin-left: 1%;
}
.line {
  width: 23%;
  height: 300px;
  list-style-type: none;
  margin-left: 20px;
  float: left;
  /* height:200px; */
  margin-bottom: 8px;
  background: rgb(68, 67, 67);
}

.imgclass {
  width: 30%;
  height: 120px;
}
.img2 {
  width: 30%;
  height: 120px;
  margin-bottom: 30px;
  margin-left: 0.3px;
  border-radius: 2%;
}
.text {
  display: flex;
  font-family: "Youshebiaotihei";
}
.chinese {
  color: #a2662f;
  font-size: 28px;
  margin-left: 80px;
}
.english {
  color: #ead3c2;
  font-size: 20px;
  margin-left: 20px;
  margin-top: 5px;
}
.el-icon-arrow-right {
  color: antiquewhite;
  font-size: 20px;
  margin-left: 15px;
  margin-top: 8px;
}

/* 商品详情 */
.goodsDetails /deep/.el-dialog__header {
  background-color: #1e1e1e;
}
.goodsDetails /deep/.el-dialog__body {
  background-color: #1e1e1e;
}
.goodsDetails /deep/.el-dialog__footer {
  background-color: #1e1e1e;
  color: #333;
  text-align: center;
}
.goodsDetails /deep/.el-dialog__headerbtn {
  position: absolute;
  top: 15px;
  right: 15px;
  font-size: 20px;
}
.goodsDetails /deep/.el-dialog__headerbtn i {
  color: #eeeeee;
}
.detailsContainer {
  background-color: #1e1e1e;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.row_1 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}
.row_2 {
  margin-top: 20px;
  margin-left: 20px;
}
.column_1 {
  height: 300px;
  width: 250px;
}
.column_2 {
  margin-left: 50px;
}
.imgsize {
  width: 250px;
  height: 250px;
}
.goodnameSpan {
  font-family: 优设标题;
  font-size: 32px;
  color: #a2662f;
}
.card_limit .el-card {
  background-color: #1e1e1e;
  border: #1e1e1e;
  margin: 0px;
  padding: 0px;
}
.card_limit /deep/ .el-card__body {
  padding: 0px;
  padding-top: 20px;
}
.downloadLink {
  height: 35px;
  font-size: 25px;
  align-items: center;
  color: #CECECE;
  padding-left: 5px;
}
.copyLink {
  height: 25px;
  font-size: 20px;
  color: #CECECE;
  padding-left: 20px;
  padding-top: 20px;
}
.font_style1 {
  font-family: 优设标题;
  font-size: 15px;
  color: #cecece;
}
.font_style2 {
  font-family: Alibaba-PuHuiTi;
  font-size: 17px;
  color: #cecece;
}
.font_style3 {
  font-family: 优设标题;
  font-size: 25px;
  color: #cecece;
}
.font_style3_xiazai {
  font-family: 优设标题;
  font-size: 18px;
  color: #cecece;
  margin-left: 10px;
  margin-top: 6px;
}
/* .xiazai {
  margin-top: -18px;
} */
.buybutton {
  width: 360px;
  height: 35px;
  margin-top: 10px;
  padding: 0%;
  font-family: "Youshebiaotihei";
  background-color: #8E8E8E;
  color: #fdfdfd;
  border: 0px;
  font-size: 25px;
}
.button_select {
  margin-left: 30px;
}
.sold {
  width: 80px;
  height: 40px;
  margin: 0%;
  padding: 0%;
  font-family: "Youshebiaotihei";
  background-color: #a2662f;
  color: #FDFDFD;
  border: 0px;
  font-size: 25px;
}
.sold_1 {
  width: 80px;
  height: 40px;
  margin: 0%;
  padding: 0%;
  font-family: "Youshebiaotihei";
  background-color: #ABABAB;
  color: #FDFDFD;
  border: 0px;
  font-size: 25px;
  margin-left: 15px;
}
.details-card {
  margin-top: 10px;
  background-color: #1e1e1e;
  width: 600px;
  height: 150px;
  border: 3px solid #666666;
  border-radius: 5px;
}
.records {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-family: 优设标题;
  font-size: 15px;
  color: #cecece;
}

/* 编辑信息 */
/* header部分 */
.changeinfo /deep/.el-dialog {
  width: 500px;
}
.changeinfo /deep/.el-dialog__header {
  background-color: #AEAEAE;
  width: 500px;
}
.changeinfo /deep/.el-dialog__title {
  font-family: "Youshebiaotihei";
  color: #eeeeee;
  font-size: 36px;
  line-height: 24px;
}
.changeinfo /deep/.el-dialog__headerbtn {
  position: absolute;
  top: 13px;
  right: -9px;
  font-size: 28px;
}
.changeinfo /deep/.el-dialog__headerbtn i {
  color: #eeeeee;
}
.changeinfo /deep/.el-dialog__body {
  background-color: #1e1e1e;
  width: 500px;
}
.changeinfo /deep/.el-dialog__footer {
  background-color: #1e1e1e;
  color: #333;
  text-align: center;
}
/* body部分 */
.upload_image {
  margin-top: 15px;
  margin-left: 15px;
  flex-direction: row;
  justify-content: flex-start;
  display: flex;
  height: 225px;
}
#div1,
#div2 {
  display: inline-block;
}
#div2 {
  margin-left: 50px;
  flex-direction: row;
  justify-content: flex-start;
}
.upload_changeinfo {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  display: inline-block;
}
#changeForm >>> .el-form-item__label {
  font-family: "Youshebiaotihei";
  color: #eeeeee;
  font-size: 20px;
}
/* .div_ {
  width: 100%;
  overflow: hidden;
  padding: 10px 0px;
  display: flex;
  flex-wrap: wrap;
}
.div_n {
  width: calc(25%-30px);
  margin-right: 50px;
} */
.text_style {
  font-family: "Youshebiaotihei";
  color: #eeeeee;
  font-size: 20px;
}
#changeForm /deep/.el-input__inner {
  background-color: #2f2f2f;
  border: 0px solid #292929;
  font-family: "Youshebiaotihei";
  color: #787878;
  font-size: 20px;
  width: 360px;
}
.box-card {
  background-color: #2f2f2f;
  width: 360px;
  height: 150px;
  border: #2f2f2f;
}
.commit_changeinfo {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  display: inline-block;
}
.commitbutton {
  height: 60px;
  width: 100px;
  padding: 0%;
  margin: 0%;
  line-height: 40px;
  font-size: 36px;
  font-family: "Youshebiaotihei";
  color: #eeeeee;
  background-color: #D77025;
  border: #D77025;
  position: relative;
  left: 210%;
}
/* 上传图片样式 */
.avatar-uploader /deep/ .el-upload {
  border: 1px solid #383838;
  border-radius: 6px;
  background-color: #383838;
  width: 180px;
  height: 160px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader /deep/ .el-upload:hover {
  border-color: #ffffff;
  color: #ffffff;
}
.coverbutton {
  height: 40px;
  width: 180px;
  margin: 0%;
  font-family: "Youshebiaotihei";
  font-size: 20px;
  color: #a0a0a0;
  background-color: #4b4b4b;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 180px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}
.avatar-uploader-icon1 {
  font-size: 2px;
  color: #8c939d;
  width: 180px;
  height: 120px;
  line-height: 120px;
  text-align: center;
  position: relative;
  left: -50px;
  top: 50px;
}
.avatar-uploader_1 /deep/ .el-upload {
  border: 1px solid #383838;
  border-radius: 6px;
  background-color: #383838;
  width: 100px;
  height: 100px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  flex-direction: column;
}
.avatar-uploader_1 /deep/ .el-upload:hover {
  border-color: #ffffff;
  color: #ffffff;
}
.avatar-uploader-icon_1 {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
</style>